import 'package:flutter/material.dart';

/// 要想使用本地图片：
///  1.在工程目录下新建文件夹 images 在里面建子文件加夹 2.0x 3.0x 适配不同的分辨率
///  2.例如a.jpg放在images根目录、2.0x、3.0x各一张
///  3.在pubspec.yaml文件下声明图片
///   assets: - images/test.jpg
///
/// Image本身不能显示图片是由ImageProvider提供具体图片资源
/// ImageProvider默认使用ImageCache做缓存

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('图片组件'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Asset资源库图片
              Image.asset(
                'assets/images/a.jpg',
                height: 30.0,
              ),
              Container(
                // Image.asset的另一种用法AssetImage
                height: 100,
                width: 100,
                child: Image(
                  image: AssetImage('assets/images/b.jpg'),
                  width: 20,
                  height: 20,
                  // 颜色混入图片中，可以指定混入模式
                  color: Colors.red,
                  // 混入模式
                  colorBlendMode: BlendMode.colorDodge,
                  // 颜色混入图片中，可以指定混入模式
                  repeat: ImageRepeat.repeat, // 当图片小于父元素时，填充方法
                ),
              ),
              // 网络图片
              // 默认情况，有内存缓存，ImageCache，有默认缓存大小
              Image.network(
                'https://cdn.pixabay.com/photo/2020/04/04/16/07/stadttheater-5002861_1280.jpg',
                height: 100,
              ),
              // 加载网络图片，使用占位图
              FadeInImage.assetNetwork(
                  // 渐入时间
                  fadeInDuration: Duration(seconds: 3),
                  fadeOutDuration: Duration(seconds: 3),
                  placeholder: 'assets/images/c.jpg',
                  height: 100,
                  image:
                      'https://cdn.pixabay.com/photo/2021/02/08/16/03/dinosaur-5995333__480.png'),
              // 圆形图片
              Container(
                child: ClipOval(
                  child: Image.network(
                    "https://cdn.pixabay.com/photo/2021/02/10/22/23/lake-6003746__480.jpg",
                    width: 100,
                    height: 100,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              // 图标,字体图标,就是字体演化而来
              Icon(
                Icons.pets,
                size: 100,
                color: Colors.blue,
              ),
              // 使用Text显示字体图标库,需要使用\u转换为unicode编码,还需要指定使用的字体库
              Text(
                '\uee5e',
                style: TextStyle(
                    fontSize: 40,
                    color: Colors.deepOrange,
                    fontFamily: "MaterialIcons"),
              )
            ],
          ),
        ),
      ),
    );
  }
}
